import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import './apple.css';

@inject("store")
@observer
class Apple extends Component {

  render() {
    const { store } = this.props;
    return (
      <div className="container">
        <div className="title">苹果篮子</div>
        <div className="info">
          <div className="now">
            <div className="tip">当前</div>
            <div>{store.appleList.length}个苹果，{store.nowWeight}克</div>
          </div>
          <div className="eat">
            <div className="tip">已吃掉</div>
            <div>{store.eatedApple.length}个苹果， {store.eatedWeight}克</div>
          </div>
        </div>
        <div className="apples">
          {
            store.appleList.map(item => (
              <div className="item" key={item.id}>
                <div className="itemInfo">
                  <div className="appleName">{item.name}</div>
                  <div>{item.weight}克</div>
                </div>
                <div className="btn">
                  <button className="eatBtn" onClick={() => store.eat(item.id)}>吃掉</button>
                </div>
              </div>
            ))
          }
          {store.appleList.length < 4 &&
            <div className="getApple">
              <button className="getBtn" onClick={store.getApple} disabled={store.getting} style={
                store.getting ? { backgroundColor: '#ccc' } : {}
              }>
                {store.getting ? '正在采摘...' : '摘苹果'}
              </button>
            </div>
          }
        </div>
      </div>
    );
  }
}

export default Apple;
